<!--
 * @Des: 任务待办
 * @Author: jin_yc
 * @Date: 2019-11-08 10:21:45
 * @LastEditor: jin_yc
 * @LastEditTime: 2022-01-19 15:48:38
 -->
<template>
  <div class="user-task-container">
    <fks-query-page
      v-loading="loading"
      :page-sizes="[15, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :data="tableData"
      highlight-current-row
      :total="total"
      :table-name="LANG.USER_TASK"
      @query="getData"
      @clear="clear"
      @sort-change="sortHandler"
    >
      <template slot="search">
        <fks-search-item :label="LANG.TASK_SUBJECT">
          <fks-input
            v-model="taskSubject"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.FORM_NAME">
          <fks-input
            v-model="formName"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.CREATOR">
          <fks-input
            v-model="creator"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item
          :span="12"
          :label="LANG.CREATE_TIME"
        >
          <fks-time-span-pick
            value-format="yyyy-MM-dd"
            :start-time.sync="startDate"
            :end-time.sync="endDate"
          />
        </fks-search-item>
      </template>
      <template>
        <fks-table-column
          type="index"
          align="center"
          label="#"
          width="60"
        />
        <!-- <fks-table-column
          prop="sourceName"
          :label="LANG.SOURCE_NAME"
          header-align="center"
          align="left"
        ></fks-table-column> -->
        <fks-table-column
          :label="LANG.FORM_NAME"
          is-link
          header-align="center"
          align="left"
          min-width="180"
        >
          <template slot-scope="scope">
            <span @click="excuteHandler(scope.row)">{{
              scope.row.formName
            }}</span>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskSubject"
          :label="LANG.TASK_SUBJECT"
          header-align="center"
          align="left"
          min-width="120"
        />
        <!-- <fks-table-column
          prop="taskName"
          :label="LANG.TASK_NAME"
          header-align="center"
          align="left"
        ></fks-table-column> -->
        <fks-table-column
          prop="taskCreatorName"
          :label="LANG.CREATOR"
          min-width="80"
          align="center"
        />
        <fks-table-column
          prop="createDate"
          :label="LANG.CREATE_TIME"
          min-width="160"
          sort
          align="center"
          sortable
        >
          <template slot-scope="scope">
            {{
              scope.row.createDate
                ? $dayjs(scope.row.createDate).format('YYYY-MM-DD HH:mm')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskAsigneeName"
          :label="LANG.ASSIGNEE"
          min-width="80"
          align="center"
        />
        <fks-table-column
          class-name="table-actions-cloumn"
          :label="LANG.OPERATION"
          align="center"
        >
          <!--  鉴权 -->
          <span slot-scope="scope">
            <fks-button
              class="table-column-opt-button"
              type="text"
              @click="excuteHandler(scope.row)"
            >{{ LANG.EXECUTE }}</fks-button>
            <fks-button
              class="table-column-opt-button"
              type="text"
              @click="delegateHanlder(scope.row)"
            >{{ LANG.DELEGATE }}</fks-button>
            <fks-button
              class="table-column-opt-button"
              type="text"
              @click="circulationHandler(scope.row)"
            >{{ LANG.FC_CC }}</fks-button>
            <!-- <fks-popconfirm
              :confirmButtonText="LANG.SUBMIT"
              :cancelButtonText="LANG.CANCEL"
              icon="fks-icon-info"
              :title="LANG.URGE_NOTICE"
            >
              <fks-button class="table-column-opt-button" type="text">{{LANG.URGE}}</fks-button>
            </fks-popconfirm>-->
          </span>
        </fks-table-column>
      </template>
    </fks-query-page>
    <delegate :task-info="selectTask" :visible.sync="delegateVisible" />
    <circulation :visible.sync="circulationVisible" :task-info="selectTask" />
    <router-view @close="getData" />
  </div>
</template>

<script>
import delegate from '@/modules/FormCenter/components/Delegate/Delegate.vue'
import circulation from '@/modules/FlowCenter/Circulation/components/NewCirculation'
import { getUserTask } from './api'
// import Mix from '@/mixins/module'
export default {
  name: 'UserTask',
  // computed: {
  //   portal() {
  //     return this.$store.state.portal
  //   }
  // },
  components: { delegate, circulation },
  // mixins: [Mix],
  data() {
    return {
      // fuzzyPlaceholder: '表单名称 | 任务名称 | 发起人',
      // preciseSearch: false,
      // searchInfo: '',
      taskSubject: '',
      formName: '',
      creator: '',
      startDate: '',
      endDate: '',
      searchBarH: '58',
      currentPage: 1,
      loading: false,
      pageSize: 15,
      total: 0,
      tableData: [],
      delegateVisible: false,
      circulationVisible: false,
      selectTask: {
        taskId: ''
      },
      sortColumn: '',
      sortOrder: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    //模糊搜索相关代码模板，暂无接口
    // fuzzyQueryHandle(val) {
    //   this.loading = true
    //   let params = {
    //     column: this.sortColumn,
    //     page: this.currentPage,
    //     size: this.pageSize,
    //     order: this.sortOrder,
    //     like: val
    //   }
    //   fuzzySearch(params)
    //     .then((res) => {
    //       if (res.status) {
    //         this.tableData = res.data.list
    //         this.total = res.data.total
    //       } else {
    //         this.tableData = []
    //       }
    //       this.loading = false
    //     })
    //     .catch(() => {
    //       this.loading = false
    //     })
    // },
    getData() {
      this.loading = true
      const data = {
        taskSubject: this.taskSubject,
        creator: this.creator,
        formName: this.formName,
        startDate: this.startDate ? this.startDate + ' 00:00:00' : '',
        endDate: this.endDate ? this.endDate + ' 23:59:59' : '',
        page: this.currentPage,
        size: this.pageSize,
        cloumn: this.sortColumn,
        order: this.sortOrder
      }
      getUserTask(data).then((res) => {
        if (res.status) {
          this.tableData = res.data.list
          this.loading = false
          this.total = res.data.total
        }
      })
    },
    /**
     * @description: 获取搜索栏的高度来调整页面
     * @param {height} 搜索栏高度
     */
    searchBarHeight(height) {
      this.searchBarH = height
    },
    /**
     * @description: 关闭弹窗
     */
    close() {
      this.dialogVisible = false
    },
    /**
     * @description: 编辑
     * @param {row} 被编辑行数据
     */
    clear() {
      this.taskSubject = ''
      this.formName = ''
      this.creator = ''
      this.startDate = ''
      this.endDate = ''
    },
    /**
     * @description: 列表中任务执行按钮
     * @param {任务数据}
     */
    excuteHandler(data) {
      //子流程
      if (data.ext1 === '3') {
        //没有formBizId，表示进入子流程的发起
        if (!data.formBizId) {
          this.$router.push(
            this.$route.path +
              `/form/execute/${data.formKey}/0/${data.taskId}/${data.taskKey}?processInstanceId=${data.processInstanceId}`
          )
        } else {
          this.$router.push(
            this.$route.path +
              `/form/execute/${data.formKey}/${data.formBizId}/${data.taskId}/${data.taskKey}?processInstanceId=${data.processInstanceId}`
          )
        }
        return
      }
      if (data.formBizId && data.taskId && data.taskKey) {
        //如果有formKey && ext1为‘1’则进行自由流程表单跳转
        if (data.formKey && data.ext1 === '1') {
          this.$router.push(
            this.$route.path +
              `/customForm/execute/${data.formKey}/${data.formBizId}/${data.taskId}/${data.taskKey}?processInstanceId=${data.processInstanceId}`
          )
        }
        //如果有formKey && ext1为‘2’则进行工作包表单跳转
        else if (data.formKey && data.ext1 === '2') {
          this.$router.push(
            this.$route.path +
              `/wpForm/execute/${data.formKey}/${data.formBizId}/${data.taskId}/${data.taskKey}?processInstanceId=${data.processInstanceId}`
          )
        }
        //如果有formKey && ext1不为‘1’则进行普通表单跳转
        else if (data.formKey && (data.ext1 !== '1' || data.ext1 !== '2')) {
          this.$router.push(
            this.$route.path +
              `/form/execute/${data.formKey}/${data.formBizId}/${data.taskId}/${data.taskKey}?processInstanceId=${data.processInstanceId}`
          )
        }
      } else {
        this.$message.warning(this.LANG.MISSING_PARAMETER)
      }
    },
    /**
     * @description: 表单查看
     * @param {任务数据}
     */
    viewHandler(data) {
      //data.ext1 == '1'表示为自由流程
      if (data.formBizId && data.formKey && data.ext1 === '1') {
        this.$router.push({
          path:
            this.$route.path +
            '/customForm/view/' +
            data.formKey +
            '/' +
            data.formBizId,
          query: { taskName: data.taskName }
        })
      } //data.ext1 == null表示为普通流程
      else if (data.formBizId && data.formKey && data.ext1 !== '1') {
        this.$router.push(
          this.$route.path +
            `/form/view/${data.formKey}/${data.formBizId}?processInstanceId=${data.processInstanceId}`
        )
      } else {
        this.$message.warning(this.LANG.MISSING_PARAMETER)
      }
    },
    delegateHanlder(row) {
      if (row.taskId) {
        this.selectTask = row
        this.delegateVisible = true
      } else {
        this.$message.warning(this.LANG.MISSING_PARAMETER)
      }
    },
    /**
     * @description:发起抄送
     */
    circulationHandler(row) {
      if (row.taskId && row.formBizId && row.formKey) {
        this.selectTask = Object.assign({}, row)
        this.circulationVisible = true
      } else {
        this.$message.warning(this.LANG.MISSING_PARAMETER)
      }
    },
    /**
     * @description: 排序
     * @param { column, prop, order }
     * @return:
     */
    sortHandler(data) {
      this.sortOrder = data.order
        ? data.order == 'ascending'
          ? 'asc'
          : 'desc'
        : null
      this.sortColumn = data.prop
      this.getData()
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.getData()
    next()
  }
}
</script>

<style lang="scss" scoped>
.user-task-container {
  position: relative;
  height: 100%;
}
</style>
